<!DOCTYPE html>
<html>
<head>
    <title>Backbone.js 示例</title>

    <meta charset="UTF-8">
    <style>
        .person-item { margin: 10px; padding: 10px; border: 1px solid #ccc; }
        .person-info { cursor: pointer; }
    </style>
</head>
<body>
<div id="app"></div>
<div id="person-list"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>

<script>
    // 1. 定义模型
    const Person = Backbone.Model.extend({
        defaults: {
            name: '无名氏',
            age: 0,
            email: ''
        },

        validate: function(attrs) {
            if (attrs.age < 0) {
                return '年龄不能为负数';
            }
        }
    });

    // 2. 定义集合
    const PeopleCollection = Backbone.Collection.extend({
        model: Person
    });

    // 3. 定义单个视图
    const PersonView = Backbone.View.extend({
        tagName: 'li',
        className: 'person-item',

        template: _.template(`
            <div class="person-info">
                <h3><%= name %></h3>
                <p>年龄: <%= age %>岁</p>
                <p>邮箱: <%= email %></p>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            </div>
        `),

        events: {
            'click .edit-btn': 'onEdit',
            'click .delete-btn': 'onDelete'
        },

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
        },

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },

        onEdit: function() {
            const newName = prompt('请输入新名字:', this.model.get('name'));
            if (newName) {
                this.model.set('name', newName);
            }
        },

        onDelete: function() {
            if (confirm('确定要删除吗?')) {
                this.model.destroy();
            }
        }
    });

    // 4. 定义集合视图
    const PeopleView = Backbone.View.extend({
        el: '#person-list',

        events: {
            'click #add-person': 'onAddPerson'
        },

        initialize: function() {
            this.listenTo(this.collection, 'add', this.addOne);
            this.listenTo(this.collection, 'reset', this.addAll);
        },

        render: function() {
            this.$el.html(`
                <h2>人员列表</h2>
                <button id="add-person">添加人员</button>
                <ul id="people-container"></ul>
            `);
            this.addAll();
            return this;
        },

        addOne: function(person) {
            const view = new PersonView({ model: person });
            $('#people-container').append(view.render().el);
        },

        addAll: function() {
            $('#people-container').empty();
            this.collection.each(this.addOne, this);
        },

        onAddPerson: function() {
            const name = prompt('请输入姓名:');
            const age = parseInt(prompt('请输入年龄:'));

            if (name && !isNaN(age)) {
                this.collection.add({
                    name: name,
                    age: age,
                    email: name.toLowerCase() + '@example.com'
                });
            }
        }
    });

    // 5. 初始化应用
    $(document).ready(function() {
        // 创建一些示例数据
        const people = new PeopleCollection([
            { name: '张三', age: 25, email: 'zhangsan@example.com' },
            { name: '李四', age: 30, email: 'lisi@example.com' },
            { name: '王五', age: 28, email: 'wangwu@example.com' }
        ]);

        // 创建并渲染视图
        const peopleView = new PeopleView({ collection: people });
        peopleView.render();

        // 启动路由
        const router = new AppRouter();
        Backbone.history.start();
    });

    // 6. 简单路由示例
    const AppRouter = Backbone.Router.extend({
        routes: {
            'home': 'showHome',
            'about': 'showAbout'
        },

        showHome: function() {
            console.log('显示首页');
        },

        showAbout: function() {
            console.log('显示关于页面');
        }
    });
</script>
</body>
</html>